<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];

    getBtn.onclick = function () {

        var wd = ""; // 搜索的关键词 (默认 "" => 查询所有数据)
        var col = "id"; // 排序的列名(默认id)
        var type = "asc"; // 排序的方式(默认升序)
        var page = 1;    // 默认显示第一页
        var size = 5;    // 默认每页显示五条

        // get("../php/searchGradeOrderLimit.php", `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true, "json", function (res) {
        //     console.log("请求完成", res);
        // })
        get(`wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, "../php/searchGradeOrderLimit.php", true, "json", function (res) {
            console.log("请求完成", res);
        })
    }

    // 问题1:  多参数传参
    // 缺点: 多参数传参 讲究一一对应 => 如果参数顺序不对 => 请求将会出错
    // 需求: 有没有什么方法 让我们的参数排名不分先后 还可以设置默认值  => 使用对象参数 => 将所有参数整合到对象中  {url,data,async,dataType,success}

    // url   请求的接口地址
    // data  请求携带数据
    // async 是否异步(默认true)
    // dataType 接口返回数据类型(默认"text" "html" "json") 
    // success  请求成功时执行的回调函数  回调函数有一个参数=>接口返回的数据
    function get(url, data = "", async = true, dataType = "text", success) {

        // success = function (res) {
        //     console.log("请求完成");
        // }

        var xhr = new XMLHttpRequest(); // 0 

        xhr.open("get", data ? url + "?" + data : url, async);  // 1

        xhr.send();

        xhr.onreadystatechange = function () {
            // 2 3 4
            // console.log("请求状态改变", xhr.readyState);

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                if (dataType === "json") {
                    result = JSON.parse(xhr.responseText);
                }
                // console.log(result);  //接口返回的数据

                // 判断用户是否存在  => 输出结果
                // 成绩搜索排序分页  => 动态渲染
                // 删除成绩         => 删除结果
                // 每次拿到数据之后要执行的操作 每个接口都不一样 

                if (success) {
                    success(result); // 将接口返回的数据result 作为回调函数的实际参数
                }

            }

        }
    }



</script>

</html>